<template> 
	<el-form   label-width="110px" style="margin:20px;width:90%;">
		<div style="width:100%; float:left">
		<el-form-item label="分站名称" style="margin:10px;width:30%; float:left">
			<el-input v-model="name"></el-input>
		</el-form-item>
			<el-form-item label="联系人" style="margin:10px;width:30%; float:left">
			<el-input v-model="contactPerson"></el-input>
		</el-form-item>
			<el-form-item label="联系电话" style="margin:10px;width:30%; float:left">
			<el-input v-model="mobile"></el-input>
		</el-form-item>
			<el-form-item label="公司名称" style="margin:10px;width:30%; float:left">
			<el-input v-model="companyName"></el-input>
		</el-form-item>
			<el-form-item label="公司地址" style="margin:10px; width:30%; float:left">
			<el-input v-model="address"></el-input>
		</el-form-item> 
		<el-form-item label="分站域名" style="margin:10px; width:30%; float:left">
			<el-input v-model="domainName"></el-input>
		</el-form-item> 
</div>
   
   <p class="titlefg">分站客服联系方式</p>
 	<div style="width:100%; float:left">
			<el-form-item label="客服电话"  style="margin:10px; width:30%; float:left">
			<el-input v-model="kefuMobile"></el-input>
		</el-form-item>  
			<el-form-item label="微信号"  style="margin:10px; width:30%; float:left">
			<el-input v-model="wx"></el-input>
		</el-form-item>  
			<el-form-item label="QQ"  style="margin:10px; width:30%; float:left">
			<el-input v-model="qq"></el-input>
		</el-form-item>    
      </div>



	<el-form-item label="二维码" style="margin:10px; width:100%; float:left">
        <el-upload
					action="/"
					list-type="picture-card"
					:auto-upload="false"
					:file-list="fileList"
					:on-change="fileChange"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
   </el-form-item>


 
    <p class="titlefg">价格设置</p>
 	<div style="width:100%; float:left">  

	  <!-- <el-form-item label="快递:"> 
			 	<el-select v-model="region" placeholder="请选择">
        <el-option label="圆通快递" value="圆通快递"> </el-option> 
  </el-select> 
    </el-form-item>  -->

        <el-form-item label="0.5kg内(普通)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="nearPrice1" type="number" placeholder="单位：元"></el-input>
		</el-form-item>  
		<el-form-item label="0.5-1kg内(普通)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="nearPrice2" type="number" placeholder="单位：元"></el-input>
		</el-form-item>  
		<el-form-item label="续重(普通)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="nearPrice3" type="number" placeholder="单位：元"></el-input>
		</el-form-item>   

        <el-form-item label="0.5kg内(偏远)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="farPrice1" type="number" placeholder="单位：元"></el-input>
		</el-form-item>  
		<el-form-item label="0.5-1kg内(偏远)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="farPrice2" type="number" placeholder="单位：元"></el-input>
		</el-form-item>  
		<el-form-item label="续重(偏远)" style="margin:10px; width:30%; float:left;white-space:nowrap;">
			<el-input v-model="farPrice3" type="number" placeholder="单位：元"></el-input>
		</el-form-item> 
	 <!-- <div class="div-box"> 
      圆通快递：0.5kg内(普通) 5元 0.5-1kg内(普通) 5元  续重(普通)7元 
	 </div> -->
	    <p class="titlefg">账号设置</p>
			<el-form-item label="账号" style="margin:10px; width:30%; float:left">
			<el-input v-model="account"></el-input>
		</el-form-item>
			<el-form-item label="密码" style="margin:10px; width:30%; float:left">
			<el-input v-model="password"></el-input>
		</el-form-item> 
 </div> 
 	<div style="margin-top:20px;width:100%; float:left">
		<el-form-item> 
			<el-button v-if="id" type="primary" @click="edit">立即修改</el-button>
			<el-button v-else type="primary" @click="register">立即创建</el-button>
		</el-form-item>
 	</div>
	</el-form>
</template>

<script>   
  import {hex_md5} from "../../utils/md5";  

	export default {
		data() {
			return { 
				dialogImageUrl: '',
				fileList:[],
        dialogVisible: false,
					id:'',
					domainName:'',
					name: '',
					contactPerson: '',
					mobile: '',
					companyName: '',
					address:'',
					kefuMobile:'',
					wx:'',
					qq:'',
					nearPrice1:'',
					nearPrice2:'',
					nearPrice3:'',
					farPrice1:'',
					farPrice2:'',
					farPrice3:'',
					account:'',
					password:'',
					addUploadUrl:'',
					qrcode:'',
					region:'',
					delivery: false,
					type: [],
					resource: '',
					desc: '' 
			}
		},
		mounted(){
			if(this.$route.query.id){
				this.getDetail();
				this.id=this.$route.query.id;
			}
		},
		methods: { 
			getDetail(){
				let that=this;
				this.axios.get(
						"/webSite/"+that.$route.query.id,
						{
							headers: {
								"Content-Type": "application/x-www-form-urlencoded",
								"domain": "taobao.tianyalei.com",
								"Authorization":sessionStorage.getItem('token')
							}
						}
					)
					.then(function(response) {
						if (response.data.code == 200) {
							  that.account=response.data.data.account;
								that.password="";
								that.qq=response.data.data.qq;
								that.wx=response.data.data.wx; 
								that.name=response.data.data.name;
								that.contactPerson=response.data.data.contactPerson;
								that.mobile=response.data.data.mobile;
								that.companyName=response.data.data.companyName;
								that.domainName=response.data.data.domainName;
								that.address=response.data.data.address;
								that.kefuMobile=response.data.data.kefuMobile;
								that.nearPrice1=response.data.data.nearPrice1/100;
								that.nearPrice2=response.data.data.nearPrice2/100;
								that.nearPrice3=response.data.data.nearPrice3/100;
								that.farPrice1=response.data.data.farPrice1/100;
								that.farPrice2=response.data.data.farPrice2/100;
								that.farPrice3=response.data.data.farPrice3/100;
								that.qrcode=response.data.data.qrcode;
								that.fileList=[{name:'1',url:response.data.data.qrcode}]
						} 
					});
			},
		 register(){   
					let that=this; 
					if(that.domainName==''){
							that.$message({message:'请输入域名',type: 'warning'}); 
							return;
					}
					if(that.nearPrice1==''||that.nearPrice2==''||that.nearPrice3==''||that.farPrice1==''||that.farPrice2==''||that.farPrice3==''){
							that.$message({message:'价格设置必填',type: 'warning'}); 
							return;
					}
					if(that.account==''){
							that.$message({message:'请输入账号',type: 'warning'}); 
							return;
					}
					if(that.password==""){
						that.$message({ message:'请填写密码', type: 'warning' });
						return;
					}
					this.qrcode=this.fileList[0].url;
					this.axios.post('/webSite', 
					this.qs.stringify({
						account:this.account,
						password:hex_md5(this.password),
						qq:this.qq,
						wx:this.wx, 
						name:this.name,
						contactPerson:this.contactPerson,
						mobile:this.mobile,
						companyName:this.companyName,
				    address:this.address,
						kefuMobile:this.kefuMobile,
						nearPrice1:this.nearPrice1*100,
						nearPrice2:this.nearPrice2*100,
						nearPrice3:this.nearPrice3*100,
						farPrice1:this.farPrice1*100,
						farPrice2:this.farPrice2*100,
						farPrice3:this.farPrice3*100,
						qrcode:this.qrcode
					}), 
					{
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
        })
    .then(function (response) {
       if(response.data.code==200){ 
			 //登陆成功    
			//  this.clearForm();    
              that.$message({
                message:'创建成功',
                type: 'success'
				}); 
						that.$router.push({path:'/user'})  
			  
          }
     }) 
		 },
		 edit(){   
					let that=this; 
					if(that.domainName==''){
							that.$message({message:'请输入域名',type: 'warning'}); 
							return;
					}
					if(that.nearPrice1==''||that.nearPrice2==''||that.nearPrice3==''||that.farPrice1==''||that.farPrice2==''||that.farPrice3==''){
							that.$message({message:'价格设置必填',type: 'warning'}); 
							return;
					}
					if(that.account==''){
							that.$message({message:'请输入账号',type: 'warning'}); 
							return;
					}
					if(that.password==""){
						that.$message({ message:'请填写密码', type: 'warning' });
						return;
					}
					this.qrcode=this.fileList[0].url;
					this.axios.put('/webSite', 
					this.qs.stringify({
						id:this.id,
						account:this.account,
						password:hex_md5(this.password),
						qq:this.qq,
						wx:this.wx, 
						name:this.name,
						contactPerson:this.contactPerson,
						mobile:this.mobile,
						companyName:this.companyName,
				    address:this.address,
						kefuMobile:this.kefuMobile,
						nearPrice1:this.nearPrice1*100,
						nearPrice2:this.nearPrice2*100,
						nearPrice3:this.nearPrice3*100,
						farPrice1:this.farPrice1*100,
						farPrice2:this.farPrice2*100,
						farPrice3:this.farPrice3*100,
						qrcode:this.qrcode
					}), 
					{
						headers: {
							'Authorization':sessionStorage.getItem("token"),
							'Content-Type':'application/x-www-form-urlencoded',
							'domain':'taobao.tianyalei.com'
						}
        })
    .then(function (response) {
       if(response.data.code==200){ 
			 //登陆成功    
			//  this.clearForm();    
              that.$message({
                message:'修改成功',
                type: 'success'
				}); 
						that.$router.push({path:'/user'})  
			  
          }
     }) 
		 },
		 fileChange(file, fileList) {
				let that=this;
				this.FileChange(file, res => {
					console.log(res.url);
					that.fileList.push({name:"1",url:res.url})
				});
			},
			FileChange(e, callback) {
				if (!e) return;
				let file = e.raw;
				if (!file) return;
				let param = new FormData();
				param.append('chunk', '0');
				param.append('chunks', '1');
				param.append('file', file, file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data',
						'Authorization':sessionStorage.getItem("token"),
						'domain':'taobao.tianyalei.com'
					}
				};
				this.axios({
							method: "GET",
							headers: {
								"Authorization": sessionStorage.getItem("token"),
								"Content-Type": "multipart/form-data",
								"domain": "taobao.tianyalei.com"
							},
							url: "/qiniu/token"
						}).then(res => {
					let token = res.data.data;
					param.append('token', token);
					this.Uploading(param, config, callback);
					return;
				})
			},
			Uploading(param, config, callback) {
				this.axios.post('http://upload-z1.qiniup.com/', param, config).then(res => {
					let params = {
						message: 'ok',
						url: `http://qiniu.tianyalei.com/${res.data.key}`
					}
					if (callback) callback(params)
				}).catch(err => {
					console.log(err, 'pppp')
				})
			},
			handleRemove(file, fileList) {
				console.log(file);
				for(var i=0;i<this.fileList.length;i++){
						if(file.url==this.fileList[i].url){
							 this.fileList.splice(i,1)
						}
				}
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
			},
 	}
   }

</script>
<style>
.titlefg{
	width: 100%;
	height: 40px;
	float: left;
	font-size: 16px;
}
</style>
